<script setup>
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import DescriptionTable from '@/components/DescriptionTable/index.vue';
import { debounce } from '@/utils/common.js';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, reactive, computed, ref, h } from 'vue';
import {
  listAddress,
  addSmt,
  queryOmsProductionMaterialBatchList,
  crmPcbaOrderCalculationAmountAPI,
} from '@/server/api/biz.js';
import { ArrowRightBold } from '@element-plus/icons-vue';
import useOrderStore from '@/store/modules/order';
import { Edit } from '@element-plus/icons-vue';
const { t } = useI18n();

const router = useRouter();
const route = useRoute();

const orderStore = useOrderStore();
const data = reactive({
  expressDeliveryData: null, // 选中的快递信息
  addressList: [], // 收货地址列表
  addressVisible: false, // 地址选择弹窗
  curAddressInfo: null, // 当前选中的地址
  payType: '1',
  expressType: 1, //收货方式
  payTypeList: [
    {
      // 付款方式
      label: 'paypal',
      value: '1',
    },
  ],
});

const placeOrderSuccess = ref(false);

// 订单详情信息
const orderDetail = reactive({
  billDetail: {
    deliveryDay: '', // 交付天数
    pcbAmount: '', // PCB工艺费用
  }, // 结算信息
  pcbInfo: {
    pcbLayer: '',
    productName: '',
    pcbWidth: '',
    pcbLength: '',
    pcbaOrderId: null,
    craftsDetail: [], // 工艺详情信息
    serviceDetail: [], // 服务配置
    basicService: [], // 基础服务
    craftService: [], // 工艺服务
    customizedService: [], // 定制服务
  },

  smtInfo: {
    pcbLayer: '',
    productName: '',
    pcbWidth: '',
    pcbLength: '',
    pcbaOrderId: null,
    craftsDetail: [], // 工艺详情信息
    serviceDetail: [], // 服务配置
    basicService: [], // 基础服务
    craftService: [], // 工艺服务
    customizedService: [], // 定制服务
    bomFileId: '',
    coordinateFileId: '',
  },
});

const batchList = ref([]); // 生产批次列表

onMounted(() => {
  getPcbOrderInfo();
  getSMTOrderInfo();
  if (Object.keys(orderStore.smtOrderInfo).length > 0) {
    getSmtQuote();
  } else {
    getPcbQuote();
  }
  getBatchOptionList();
  getAddressList();
});

// 联系人信息
const contactsInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo.name} ${data?.curAddressInfo?.phone.replace(
      /(\d{3})\d{4}(\d{4})/,
      '$1****$2',
    )}`;
  } else {
    return ``;
  }
});

//  计算总费用
const totalAmount = computed(() => {
  const sum =
    Object.keys(orderStore.smtOrderInfo).length !== 0
      ? orderDetail.billDetail.payCurrencyTaxAmount + parseFloat(pcbAmount.value)
      : orderDetail.billDetail.payCurrencyTaxAmount;
  return Math.round(sum * 100) / 100;
});

// 地址信息
const addressInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo?.address}`;
  } else {
    return ``;
  }
});

// 区信息
const districtInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo?.country} ${data?.curAddressInfo?.province} ${
      data?.curAddressInfo?.city || ''
    } ${data?.curAddressInfo?.zone || ''}`;
  } else {
    return ``;
  }
});

// smt费用
const smtAmount = computed(() => {
  if (orderDetail.billDetail.bomMachiningAmount > 0) {
    // 计算汇率后金额
    const craftsServiceAmount = orderDetail.billDetail.craftsServiceAmount;
    const bomAmount = orderDetail.billDetail.bomAmount;
    const bomMachiningAmount = orderDetail.billDetail.bomMachiningAmount;
    // const sumAmount =
    //   (bomMachiningAmount + craftsServiceAmount + bomAmount) /
    //   orderDetail.billDetail.exchangeRmbRate;
    const sumAmount = bomMachiningAmount + craftsServiceAmount + bomAmount;
    return Math.round(sumAmount * 100) / 100;
  } else {
    return 0;
  }
});

// PCB费用
const pcbAmount = computed(() => {
  const pcbOrderInfo = orderStore.pcbOrderInfo.billInfo;
  if (pcbOrderInfo) {
    return `${pcbOrderInfo.craftsServiceAmount}`;
  } else {
    return 0;
  }
});

const currentBreadcrumbTitle = computed(() => {
  if (orderDetail.pcbInfo.orderNumber) {
    return 'PCB';
  }
  if (orderDetail.smtInfo.orderNumber) {
    return 'SMT';
  }
});

/**
 *  获取PCB下单信息
 */
function getPcbOrderInfo() {
  const orderStore = useOrderStore();
  // 回显基本信息
  const pcbSelectedInfo = orderStore.pcbSelectedListMap;
  const pcbOrderInfo = orderStore.pcbOrderInfo;
  // const pcbSelectedInfo = JSON.parse(localStorage.getItem('pcbSelectedListMap'));
  // const pcbOrderInfo = JSON.parse(localStorage.getItem('pcbOrderInfo'));
  // console.log('pcbSelectedInfo', pcbSelectedInfo);
  // console.log('pcbOrderInfo', pcbOrderInfo);
  if (Object.keys(pcbOrderInfo).length !== 0) {
    orderDetail.pcbInfo.productName = pcbOrderInfo.productName;
    orderDetail.pcbInfo.pcbWidth = pcbOrderInfo.pcbWidth;
    orderDetail.pcbInfo.pcbLength = pcbOrderInfo.pcbLength;
    orderDetail.pcbInfo.orderNumber = pcbOrderInfo.orderNumber;
    // 获取板层信息
    const layerInfo = pcbOrderInfo.craftsCategory.find((item) => item.mainCategory === 1);
    if (layerInfo) {
      orderDetail.pcbInfo.pcbLayer = layerInfo.craftsName;
    }
    // 回显服务工艺信息
    const slectedGroupList = Object.values(pcbSelectedInfo);
    const selectedList = slectedGroupList.flat();
    const selectedServiceList = selectedList.filter((item) => 'serviceKey' in item);
    orderDetail.pcbInfo.craftsDetail = pcbOrderInfo.craftsCategory;
    orderDetail.pcbInfo.serviceDetail = selectedServiceList;
    orderDetail.pcbInfo.basicService = selectedServiceList.filter((item) => item.serviceType === 1); // 1基础服务，2定制服务，3工艺服务
    orderDetail.pcbInfo.customizedService = selectedServiceList.filter(
      (item) => item.serviceType === 2,
    ); // 1基础服务，2定制服务，3工艺服务
    orderDetail.pcbInfo.craftService = selectedServiceList.filter((item) => item.serviceType === 3); // 1基础服务，2定制服务，3工艺服务
  }
}

/**
 *  获取SMT下单信息
 */
function getSMTOrderInfo() {
  const orderStore = useOrderStore();
  // 回显基本信息
  const smtSelectedInfo = orderStore.smtSelectedListMap;
  const smtOrderInfo = orderStore.smtOrderInfo;
  console.log(smtSelectedInfo);
  if (Object.keys(smtSelectedInfo).length !== 0) {
    orderDetail.smtInfo.smtLayer = smtOrderInfo.smtLayer; // 贴片层
    orderDetail.smtInfo.orderNumber = smtOrderInfo.orderNumber; // 贴片数量
    orderDetail.smtInfo.isUseAlternative = smtOrderInfo.isUseAlternative; // 	是否接受替代
    orderDetail.smtInfo.batchYearLimit = smtOrderInfo.batchYearLimit; // 	接受批次
    orderDetail.smtInfo.coordinateFileId = smtOrderInfo.coordinateInfo.fileId;
    orderDetail.smtInfo.bomFileId = smtOrderInfo.boomInfo.fileId;
    orderDetail.smtInfo.pcbWidth = smtOrderInfo.pcbWidth;
    orderDetail.smtInfo.pcbLength = smtOrderInfo.pcbLength;
    // // 回显服务工艺信息
    const slectedGroupList = Object.values(smtSelectedInfo);
    const selectedList = slectedGroupList.flat();
    const selectedServiceList = selectedList.filter((item) => 'serviceKey' in item);
    const selectedCraftList = selectedList.filter((item) => 'craftsKey' in item);
    orderDetail.smtInfo.craftsDetail = selectedCraftList;
    orderDetail.smtInfo.serviceDetail = selectedServiceList;

    orderDetail.smtInfo.basicService = selectedServiceList.filter((item) => item.serviceType === 1); // 1基础服务，2定制服务，3工艺服务
    orderDetail.smtInfo.customizedService = selectedServiceList.filter(
      (item) => item.serviceType === 2,
    ); // 1基础服务，2定制服务，3工艺服务
    orderDetail.smtInfo.craftService = selectedServiceList.filter((item) => item.serviceType === 3); // 1基础服务，2定制服务，3工艺服务
    // 回显快递地址
    // data.curAddressInfo = smtOrderInfo.curAddressInfo;
    // data.expressDelivery = smtOrderInfo.expressDelivery;
  }
}

/**
 * 获取物料生产批次信息
 */
const getBatchOptionList = () => {
  queryOmsProductionMaterialBatchList().then((res) => {
    if (res.code === 200) {
      batchList.value = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 获取右侧pcb报价
 */
const getPcbQuote = () => {
  crmPcbaOrderCalculationAmountAPI({
    craftsCategory: orderDetail.pcbInfo.craftsDetail,
    serviceCategory: orderDetail.pcbInfo.serviceDetail,
    pcbWidth: orderDetail.pcbInfo.pcbWidth,
    pcbLength: orderDetail.pcbInfo.pcbLength,
    smtNumber: orderDetail.pcbInfo.orderNumber,
    business: 1, // 业务产品 1pcb,2pcba,3组包装工艺
    layer: 1, // pcb 默认为1
  }).then((res) => {
    if (res.code == 200) {
      orderDetail.billDetail = res.data;
    } else {
      router.replace({ path: '/home' });
    }
  });
  // }
};

/**
 * 获取右侧smt报价
 */
const getSmtQuote = () => {
  crmPcbaOrderCalculationAmountAPI({
    bomFileId: orderDetail.smtInfo.bomFileId,
    coordinateFileId: orderDetail.smtInfo.coordinateFileId,
    craftsCategory: orderDetail.smtInfo.craftsDetail,
    serviceCategory: orderDetail.smtInfo.serviceDetail,
    pcbWidth: orderDetail.smtInfo.pcbWidth,
    pcbLength: orderDetail.smtInfo.pcbLength,
    smtNumber: orderDetail.smtInfo.orderNumber,
    business: 2, // 业务产品 1pcb,2pcba,3组包装工艺
    layer: orderDetail.smtInfo.smtLayer,
  }).then((res) => {
    if (res.code == 200) {
      orderDetail.billDetail = res.data;
    } else {
      router.replace({ path: '/home' });
    }
  });
  // }
};

/**
 * 获取地址列表
 */
function getAddressList() {
  const obj = {
    useType: 1,
    pageType: 0,
  };
  listAddress(obj).then((res) => {
    if (res.code === 200) {
      data.addressList = res.data.records;
      const defaultAddress = res.data.records.find((item) => item.isMain === 2);

      if (defaultAddress) {
        const { country, province, city, zone, address, name, phone, isMain } = defaultAddress;
        data.curAddressInfo = {
          country,
          province,
          city,
          zone,
          address,
          name,
          phone,
          isMain,
        };
      }
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/**
 * 编辑地址
 */
const handleEditAddress = () => {
  data.addressVisible = true;
};

/**
 *  选中地址
 */
const handleSelectedAddress = (item) => {
  console.log(item, '点击了');
  data.curAddressInfo = item;
  data.addressVisible = false;
};

/**
 * 防抖处理
 */
const debounceSubmit = debounce(
  () => {
    handleSubmit();
  },
  500,
  false,
);

/**
 * 下单
 */
const handleSubmit = () => {
  const orderStore = useOrderStore();
  const pcbOrderInfo = orderStore.pcbOrderInfo;
  const smtOrderInfo = orderStore.smtOrderInfo;
  // 提交前校验
  if (!data.curAddressInfo) {
    ElMessage.warning(t('mall.choose_delivery_address'));
    return;
  }
  if (!data.curAddressInfo) {
    ElMessage.warning(t('mall.choose_delivery_method'));
    return;
  }
  const {
    country,
    province,
    city,
    zone,
    address,
    name: expressName,
    phone: expressPhone,
    fee: expressFee,
    currency: feeUnit,
  } = data.curAddressInfo;
  // 快递地址
  const expressAddress = [country, province, city, zone, address].join('/');
  // pcb信息
  const {
    productId,
    productName,
    craftsCategory: pcbCraftsCategory,
    serviceCategory: pcbServiceCategory,
    orderNumber,
    pcbLength,
    pcbWidth,
    gerberFileId,
  } = orderStore.pcbOrderInfo;
  // 快递用户名称
  const expressUser = data.curAddressInfo.lastName + data.curAddressInfo.name;
  const params = {
    crmPcbaOrderExpress: {
      expressAddress,
      expressFee,
      expressPhone,
      expressName,
      expressSerial: '',
      expressType: data.expressType,
      expressUser,
      feeUnit,
    },
    orderNumber: orderNumber,
    expressType: data.expressType, // 快递方式 1货到付款，2厂家代付
    orderCategory: Object.keys(orderStore.smtOrderInfo).length > 0 ? 2 : 1, // 订单类别 1pcb,2pcba,3组包装
    matchType: orderStore.smtOrderInfo.matchType || 1, // 匹配方式1快速匹配，2深度匹配
    orderDiscountAmount: 0,
    orderDiscountRate: 0,
  };
  params.orderNumber =
    Object.keys(orderStore.smtOrderInfo).length > 0
      ? orderStore.smtOrderInfo.orderNumber
      : orderNumber; // 订单类别 1pcb,2pcba,3组包装
  if (smtOrderInfo.productType === '3' || smtOrderInfo.productType === '1') {
    // 客户提供
    params.gerberFileId = orderStore.smtOrderInfo.gerberFileId;
  } else {
    params.gerberFileId = orderStore.pcbOrderInfo.gerberFileId;
  }

  if (Object.keys(pcbOrderInfo).length !== 0) {
    // 获取板层信息
    const layerInfo = pcbCraftsCategory.find((item) => item.mainCategory === 1);
    const pcbLayer = layerInfo?.craftsName;
    params.crmPcbaPcbOrder = {
      productId,
      productName,
      craftsCategory: pcbCraftsCategory,
      serviceCategory: pcbServiceCategory,
      orderPcbNumber: orderNumber,
      orderPcbSize: 0,
      pcbLayer,
      pcbSize: 0,
      pcbStatus: 0,
      pcbWidth,
      pcbLength,
      dataSource: 2, // IBE定制
      gerberFileId: orderStore.pcbOrderInfo.gerberFileId,
    };
  }
  if (Object.keys(smtOrderInfo).length !== 0) {
    params.bomFileId = smtOrderInfo.boomInfo.fileId;
    params.coordinateFileId = smtOrderInfo.coordinateInfo.fileId;
    const pcbParam = {
      dataSource: smtOrderInfo.productType,
    };
    // 选择历史订单
    if (smtOrderInfo.selectedOrderedPcbList.length > 0) {
      pcbParam.historyPcbOrderId =
        smtOrderInfo.selectedOrderedPcbList.length > 0
          ? smtOrderInfo.selectedOrderedPcbList[0].id
          : '';
    }
    if (smtOrderInfo.productType === '3') {
      // 自己提供
      pcbParam.pcbWidth = smtOrderInfo.pcbWidth;
      pcbParam.pcbLength = smtOrderInfo.pcbLength;
      pcbParam.orderPcbNumber = smtOrderInfo.orderNumber;
    }
    params.crmPcbaPcbOrder = { ...params.crmPcbaPcbOrder, ...pcbParam };
    // 选择客户提供
    params.crmPcbaSmtOrder = {
      batchYearLimit: smtOrderInfo.batchYearLimit,
      craftsCategory: smtOrderInfo.craftsCategory,
      isUseAlternative: smtOrderInfo.isUseAlternative,
      gerberFileId: smtOrderInfo.gerberFileId,
      // joinPcbOrderId: smtOrderInfo.joinPcbOrderId,
      // joinPcbaOrderId: smtOrderInfo.joinPcbaOrderId,
      // pluginsNumber
      // pluginsTypeNumber
      pcbWidth: smtOrderInfo.pcbWidth,
      pcbLength: smtOrderInfo.pcbLength,
      productId: smtOrderInfo.productId,
      productName: smtOrderInfo.productName,
      craftsCategory: smtOrderInfo.craftsCategory,
      serviceCategory: smtOrderInfo.serviceCategory,
      smtLayer: smtOrderInfo.smtLayer,
      smtNumber: smtOrderInfo.orderNumber,
      totalMaterialsTypeNumber: smtOrderInfo.orderNumber,
      totalQuantiQty: smtOrderInfo.totalQuantiQty,
    };
  }
  createOrder(params);
};

//
const closePlaceOrder = () => {
  // if (route.query.matchType === '2') {
  //   placeOrderSuccess.value = false;
  //   return;
  // }
  queryOrder();
};

// 查看订单
const queryOrder = () => {
  const orderCategory = Object.keys(orderStore.smtOrderInfo).length > 0 ? 0 : 1;
  router.replace({
    path: '/order',
    query: {
      id: paymentId.value,
      type: 0,
      tabs: orderCategory,
    },
  });

  placeOrderSuccess.value = false;
};

// 去支付
const paymentId = ref();
const toPayment = () => {
  router.replace({
    path: '/payment',
    query: {
      id: paymentId.value,
    },
  });
  placeOrderSuccess.value = false;
};

/**
 * 创建订单
 */
const createOrder = (obj) => {
  addSmt(obj).then((res) => {
    if (res.code === 200) {
      clearCachedOrderInfo();
      placeOrderSuccess.value = true;
      paymentId.value = res.data.id;
      // ElMessageBox.confirm(
      //   h('div', null, [
      //     h('h2', null, '下单成功！'),
      //     h(
      //       'p',
      //       null,
      //       `${matchType === '2' ? '正在深度匹配中，预计时间：15-30分钟内，请耐心等待！' : ''}`,
      //     ),
      //     h('p', null, `订单号：${res.data.id}`),
      //   ]),
      //   {
      //     distinguishCancelAndClose: true,
      //     confirmButtonText: '查看订单',
      //     cancelButtonText: '去支付',
      //   },
      // )
      //   .then(() => {
      //     // 查看订单
      //     const orderCategory = Object.keys(orderStore.smtOrderInfo).length > 0 ? 0 : 1;
      //     router.push({
      //       path: '/order',
      //       query: {
      //         id: res.data.id,
      //         type: 0,
      //         tab: orderCategory,
      //       },
      //     });
      //   })
      //   .catch(() => {
      //     // 去支付
      //     router.push({
      //       path: '/payment',
      //       query: {
      //         id: res.data.id,
      //       },
      //     });
      //   });
    }
  });
};

// 创建订单成功，清除已选信息
const clearCachedOrderInfo = () => {
  orderStore.setPcbOrderInfo({});
  localStorage.removeItem('pcbOrderInfo');
  orderStore.setPcbSelectedListMap({});
  localStorage.removeItem('pcbSelectedListMap');
};

// 格式化
const formatIsUseAlternative = (value) => {
  if (!value) {
    return '';
  }
  const statusMap = {
    1: t('mall.accept_the_batch'),
    2: t('mall.do_not_accept'),
  };
  return statusMap[value] || '--';
};

// 格式化批次
const formatBatch = (value) => {
  const batchItem = batchList.value.find((item) => item.batchValue === value);
  if (!batchItem) {
    return '--';
  }
  return batchItem.batchName;
};

// 格式化贴片层
const formatSmtLayer = (value) => {
  if (!value) {
    return '';
  }
  const statusMap = {
    1: t('smt.topAndBottom'),
    2: t('smt.topPostingOnly'),
    3: t('smt.bottomLayerOnly'),
  };
  return statusMap[value] || '--';
};

const rows = ref([{ columns: ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'] }]);
</script>
<template>
  <!-- 头部 -->
  <smt-header></smt-header>
  <div class="wrapper">
    <div class="settlement container">
      <div class="breadcrumb-wrap" style="margin-bottom: 20px">
        <el-breadcrumb :separator-icon="ArrowRight" class="f-28">
          <el-breadcrumb-item>{{ $t('menu.home') }}</el-breadcrumb-item>
          <el-breadcrumb-item
            >{{ currentBreadcrumbTitle }}{{ $t('mall.quote') }}</el-breadcrumb-item
          >
          <el-breadcrumb-item
            >{{ $t('om.Submit') }}{{ currentBreadcrumbTitle
            }}{{ $t('mall.order') }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <!-- PCB信息  -->
      <div class="block-container" v-if="orderDetail.pcbInfo.orderNumber">
        <div class="title-section">
          <p class="title">{{ $t('smt.PCBInfo') }}</p>
        </div>

        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('mall.material_category')}:`">{{
              orderDetail.pcbInfo.productName
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('om.BoardSize')}:`">
              {{
                `${orderDetail.pcbInfo.pcbLength} * ${orderDetail.pcbInfo.pcbWidth}`
              }}cm</el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('om.Platelayer')}:`">{{
              orderDetail.pcbInfo.pcbLayer
            }}</el-descriptions-item>

            <el-descriptions-item :label="`${$t('home.boardSum')}:`"
              >{{ orderDetail.pcbInfo.orderNumber }}Pcs</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <!-- 工艺信息 -->
        <div class="description-wrap" v-if="orderDetail.pcbInfo.craftsDetail.length > 0">
          <description-table
            :header="$t('mall.process_information')"
            :data="orderDetail.pcbInfo.craftsDetail"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.pcbInfo.craftsDetail.length > 0">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.pcbInfo.craftsDetail"
              :key="index"
              :label="item.parentName"
              >{{ item.craftsName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 基础服务 -->
        <div class="description-wrap" v-if="orderDetail.pcbInfo.basicService.length > 0">
          <description-table
            :header="$t('smt.Basicservices')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.pcbInfo.basicService"
          />
        </div>
        <!-- 工艺服务 -->
        <div class="description-wrap" v-if="orderDetail.pcbInfo.craftService.length > 0">
          <description-table
            :header="$t('mall.process_service')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.pcbInfo.craftService"
          />
        </div>
        <!-- 定制服务 -->
        <div class="description-wrap" v-if="orderDetail.pcbInfo.customizedService.length > 0">
          <description-table
            :header="$t('smt.Customizedservices')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.pcbInfo.customizedService"
          />
        </div>
      </div>

      <!-- SMT信息  -->
      <div class="block-container" v-if="orderDetail.smtInfo.orderNumber">
        <div class="title-section">
          <p class="title">{{ $t('smt.SMTInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('smt.chipLayer')}:`">{{
              formatSmtLayer(orderDetail.smtInfo.smtLayer)
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.smt_quantity')}:`">{{
              orderDetail.smtInfo.orderNumber
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.accept_alternative_components')}:`">{{
              formatIsUseAlternative(orderDetail.smtInfo.isUseAlternative)
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.accept_the_batch')}:`">{{
              formatBatch(orderDetail.smtInfo.batchYearLimit)
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 工艺信息 -->
        <div class="description-wrap" v-if="orderDetail.smtInfo.craftsDetail.length > 0">
          <description-table
            :header="`SMT${$t('mall.process_information')}`"
            :propsConfig="{
              label: 'parentName',
              value: 'craftsName',
            }"
            :data="orderDetail.smtInfo.craftsDetail"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.smtInfo.craftsDetail.length > 0">
          <div class="description-head">
            <p class="description-title">SMT{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.smtInfo.craftsDetail"
              :key="index"
              :label="item.parentName"
              >{{ item.craftsName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->
        <!-- 基础服务 -->
        <div class="description-wrap" v-if="orderDetail.smtInfo.basicService.length > 0">
          <description-table
            :header="$t('smt.Basicservices')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.smtInfo.basicService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.smtInfo.basicService.length > 0">
          <div class="description-head">
            <p class="description-title">基础服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.smtInfo.basicService"
              :key="index"
              :label="item.parentName"
              >{{ item.serviceName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 工艺服务 -->
        <div class="description-wrap" v-if="orderDetail.smtInfo.craftService.length > 0">
          <description-table
            :header="$t('smt.Basicservices')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.smtInfo.craftService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.smtInfo.craftService.length > 0">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_service')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.smtInfo.craftService"
              :key="index"
              :label="item.parentName"
              >{{ item.serviceName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 定制服务 -->
        <div class="description-wrap" v-if="orderDetail.smtInfo.customizedService.length > 0">
          <description-table
            :header="$t('smt.Basicservices')"
            :propsConfig="{
              label: 'parentName',
              value: 'serviceName',
            }"
            :data="orderDetail.smtInfo.customizedService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.smtInfo.customizedService.length > 0">
          <div class="description-head">
            <p class="description-title">定制服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.smtInfo.customizedService"
              :key="index"
              :label="item.parentName"
              >{{ item.serviceName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->
      </div>

      <!-- 收货信息  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.shipping_information') }}</p>
        </div>
        <div class="content-wrap">
          <div class="address-container" @click="handleEditAddress" v-if="data.curAddressInfo">
            <div class="address-info">
              <p class="district">
                <!-- 省市区 -->
                {{ districtInfo
                }}<el-tag
                  class="default-tag"
                  type="primary"
                  v-if="data.curAddressInfo.isMain === 2"
                  >{{ $t('mall.default') }}</el-tag
                >
              </p>
              <!-- 小区 -->
              <p class="address">{{ addressInfo }}</p>
              <!-- 联系电话 -->
              <p class="contacts">{{ contactsInfo }}</p>
            </div>
            <div style="margin-right: 70px">
              <el-button type="primary" size="small" :icon="Edit">{{
                $t('mall.change_address')
              }}</el-button>
            </div>
          </div>
          <div v-else>
            <el-button type="primary" @click="handleEditAddress">{{
              $t('smt.Selectshippingaddress')
            }}</el-button>
          </div>
        </div>
      </div>

      <!-- 快递方式  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('smt.Expressway') }}</p>
        </div>
        <div class="content-wrap">
          <el-radio-group v-model="data.expressType">
            <el-radio :label="1">{{ $t('mall.cash_on_delivery') }}</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 付款方式  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.payment_method') }}</p>
        </div>
        <div class="content-wrap">
          <el-radio-group v-model="data.payType">
            <el-radio v-for="(item, index) in data.payTypeList" :key="index" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="order-table-wrap">
        <div class="table-head">
          <div class="head-item">{{ $t('mall.delivery_and_shipping') }}</div>
          <div class="head-item">{{ $t('mall.price_and_costs') }}</div>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="`${$t('mall.delivery_time')}:`"
            ><span class="content" v-if="orderDetail.billDetail.deliveryDay">
              {{
                `${orderDetail.billDetail.deliveryDay} - ${
                  orderDetail.billDetail.deliveryDay + 3
                } `
              }}{{ $t('mall.days') }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.pcb_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.billDetail.symbol || '$' }}{{ pcbAmount }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.express_delivery')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >

          <el-descriptions-item :label="`${$t('mall.smt_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.billDetail.symbol }}{{ smtAmount }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.shipping_time')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.logistics_fee')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_costs')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item></el-descriptions-item>
          <el-descriptions-item :label="`${$t('mall.tax_fee')}:`"
            ><span>{{ $t('mall.based_on_actual_costs') }}</span></el-descriptions-item
          >
        </el-descriptions>
        <div class="table-footer">
          <p>
            <label class="title">{{ $t('mall.estimated_cost') }}</label
            ><span class="amount">{{ orderDetail.billDetail.symbol }}{{ totalAmount }}</span>
          </p>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="btn-wrap">
        <el-button plain @click="$router.back()">{{ $t('mall.previous_step') }}</el-button>
        <el-button type="primary" @click="debounceSubmit()">{{ $t('smt.SubmitOrder') }}</el-button>
      </div>

      <!-- 收货地址弹窗 -->
      <SelectAddressDialog
        v-model="data.addressVisible"
        :title="data.title"
        :addressList="data.addressList"
        @getAddressList="getAddressList"
        @selected="handleSelectedAddress"
      />
    </div>
  </div>
  <!-- 底部 -->
  <smt-footer></smt-footer>
  <!-- 支付成功弹窗 -->
  <el-dialog
    title=""
    v-model="placeOrderSuccess"
    :close-on-click-modal="false"
    width="30%"
    :before-close="closePlaceOrder"
  >
    <div class="dialog-style">
      <div class="dialog-layout">
        <img src="../../assets/images/placeOrder/placeOrder/success.png" alt="" class="success" />
        <span class="success-title"
          >{{ $t('mall.order_successful') }}，
          <span style="font-size: 25px; margin-left: -15px">{{
            $t('mall.complete_payment_soon')
          }}</span>
        </span>
      </div>
      <span class="order" style="margin-bottom: 10px" v-if="route.query.matchType === '2'">{{
        $t('mall.deep_matching_in_progress')
      }}</span>
      <span class="order">{{ $t('om.OrderNo') }}：{{ paymentId }}</span>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="toPayment" v-if="route.query.matchType !== '2'">{{
          $t('mall.proceed_to_payment')
        }}</el-button>
        <el-button @click="queryOrder">{{ $t('mall.view_order') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 12px 0 72px;
  background: #f5f5f5;
  .settlement {
    padding: 28px 20px;
    border-radius: 8px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .page-title {
      padding: 0 24px;
      color: var(--mall-text-color-primary);
      font-size: 20px;
      font-weight: 700;
    }
    .block-container {
      padding-bottom: 20px;
      .title-section {
        display: flex;
        align-items: center;
        padding: 0 30px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
        background: #f5f5f5;
        color: #383838;
        font-size: 14px;
        font-weight: 400;
      }

      .content-wrap {
        padding: 20px 30px 8px;
        &.border {
          border-bottom: 1px solid #d9d9d9;
        }
      }

      .description-wrap {
        padding-top: 16px;
        .description-head {
          border: 1px solid #d9d9d9;
          padding: 0 20px;
          border-bottom: none;
          height: 35px;
          line-height: 35px;
          background: #fafafa;
          .description-title {
            color: #383838;
            font-size: 14px;
          }
        }
      }

      .address-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 384px;
        cursor: pointer;
        .address-info {
          color: #686868;
          font-size: 12px;
          font-weight: 400;
          .default-tag {
            margin-left: 14px;
          }
          .address {
            padding: 10px 0;
            color: #383838;
            font-size: 14px;
          }
          .contacts {
            color: #888888;
          }
        }
      }
    }

    .order-table-wrap {
      .table-head {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-bottom: none;
        background: #f5f5f5;
        .head-item {
          flex: 1;
          text-align: center;
          &:first-child {
            position: relative;
            &:after {
              content: '';
              position: absolute;
              right: 3px;
              height: 40px;
              width: 1px;
              background: #d9d9d9;
            }
          }
        }
      }

      .table-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-top: none;
        font-size: 16px;
        font-weight: 700;
        font-family: 'SourceHanSansCN';
        .title {
          color: #000000;
          padding-right: 5px;
        }
      }

      ::v-deep .el-descriptions__body {
        --el-descriptions-item-bordered-label-background: transparent !important;
      }
    }

    .amount {
      color: #ff0000;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      padding: 30px;
    }
  }
  ::v-deep .el-descriptions__body {
    --el-descriptions-table-border: 1px solid #d9d9d9 !important;
    --el-descriptions-item-bordered-label-background: #fafafa;
  }
}
.dialog-style {
  display: flex;
  flex-direction: column;

  .dialog-layout {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .success-title {
      color: #383838;
      font-weight: 400;
      font-size: 36px;
      margin-left: 10px;
    }
    .success {
      width: 80px;
      height: 80px;
    }
  }
  .order {
    color: #686868;
    font-size: 16px;
    font-weight: 400;
    margin-left: 100px;
  }
}
</style>
